<template>
  <div class="home">
    <app-header title="Huluwa" class="app-header"></app-header>
    <div class="bs-scroll-container">
      <div class="bs-scroll-content">
        <video-player
          ref="videoPlayer"
          class="video-player-box"
          :options="videoPlayerOptions"
          :cross-origin="''"
          :playsinline="true"
          @play="playHandler"
          @pause="pauseHandler"
          @ended="endedHandler"
          @waiting="waitingHanlder"
          @playing="playingHandler"
          @loadeddata="loadedDataHandler"
          @timeupdate="timeUpdateHandler"
          @canplay="canPlayHandler"
          @canplaythrough="canPlaythroughHandler"
          @statechanged="stateChangedHandler"
          @ready="readyHandler"></video-player>
        <div class="open-bg-btn" @click="openAppHandler"></div>
        <home-favorite-card
          @on-save="saveHandler"
          @on-favorite="favoriteHandler"
          @on-join="joinHandler"
          @on-copy="copyHandler"></home-favorite-card>
      </div>
    </div>
    <home-util-bar
      @on-customer-service="customerServiceHandler"
      @on-code="codeHandler"
      @on-tutorial="tutorialHandler"></home-util-bar>
  </div>
</template>

<script>
import HomeFavoriteCard from './components/home-favorite-card';
import HomeUtilBar from './components/home-util-bar';
import BScroll from 'better-scroll';
import { CommonUtils } from '../../utils/common';

export default {
  name: 'home',

  components: {
    [HomeFavoriteCard.name]: HomeFavoriteCard,
    [HomeUtilBar.name]: HomeUtilBar
  },

  computed: {
    player () {
      return this.$refs.videoPlayer.player;
    }
  },

  data () {
    return {
      scroller: null,
      videoPlayerOptions: {
        // 是否关闭音频
        muted: false,
        // 初始语言，默认为英语，code参见：https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
        language: 'zh-CN',
        // 播放速度，指定后Video.js将显示一个控件(vjs-playback-rate类的控件)，允许用户从选项数组中选择播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例
        aspectRatio: '4:3',
        fluid: true,
        // 等同于原生<video>标签中的一组<source>子标签，可实现优雅降级；type 属性规定媒体资源的 MIME 类型，标准类型可参见：https://www.iana.org/assignments/media-types/media-types.xhtml；
        sources: [
          {
            src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8',
            type: 'application/vnd.apple.mpegurl'
          }
        ],
        // 兼容顺序，默认值是['html5']，这意味着html5技术是首选，其他已注册的技术将按其注册的顺序在该技术之后添加。
        techOrder: ['html5'],
        // 在视频开始播放之前显示的图像的URL（封面），这通常是一个视频帧或自定义标题屏幕，一旦用户点击“播放”，图像就会消失。
        poster: ''
      }
    };
  },

  mounted () {
    this.scroller = new BScroll(document.querySelector('.bs-scroll-container'), {
      click: true,
      tap: false
    });
  },

  methods: {
    customerServiceHandler () {
      console.log('handle customer-service...');
      this.$router.push({ name: 'customer-service' });
    },

    codeHandler () {
      console.log('handle code...');
    },

    tutorialHandler () {
      console.log('handle tutorial...');
    },

    openAppHandler () {
      console.log('open app...');
    },

    saveHandler () {
      console.log('handle save..');
    },

    favoriteHandler () {
      console.log('handle favorite...');
    },

    joinHandler () {
      console.log('handle join...');
    },

    copyHandler (channel) {
      console.log('handle copy');
      if (!(channel && channel.url)) {
        return;
      }
      CommonUtils.copy(channel.url);
    },

    playHandler (player) {
      console.log('play...');
      console.log(player);
    },

    pauseHandler (player) {
      console.log('pause...');
      console.log(player);
    },

    endedHandler (player) {
      console.log('ended...');
      console.log(player);
    },

    waitingHanlder (player) {
      console.log('waiting...');
      console.log(player);
    },

    playingHandler (player) {
      console.log('playing...');
      console.log(player);
    },

    loadedDataHandler (player) {
      console.log('loaded data...');
      console.log(player);
    },

    timeUpdateHandler (player) {
    },

    canPlayHandler (canPlay) {
      console.log('can play...');
      console.log(canPlay);
    },

    canPlaythroughHandler (canPlaythrough) {
      console.log('can playthrough');
      console.log(canPlaythrough);
    },

    stateChangedHandler (state) {
    },

    readyHandler (player) {
      console.log('video player is ready...');
      console.log(player);
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  background: url("../../assets/images/bg_img.png") no-repeat top left / 100% 100%;

  .app-header {
    flex: 0 0 140px;
  }

  .bs-scroll-container {
    flex: 0 0 calc(100% - 140px);
    overflow: scroll;
  }

  .open-bg-btn {
    margin: 28px auto 0;
    width: 420px;
    height: 96px;
    background: url("../../assets/images/btn_app.png") no-repeat top left / 100% 100%;
  }
}
</style>
